<template>
  <div class="login-container">
    <!-- 头部区域 -->
    <van-nav-bar title="黑马头条 - 登录" fixed />
    <!-- fixed固定定位 当布尔值为true的时候 可以不写  -->

    <!-- 登录的表单 -->
    <van-form @submit="onSubmit">
      <van-field
        v-model="from.mobile"
        label="手机号"
        placeholder="请输入手机号"
        required
        :rules="[
          {
            required: true,
            message: '请填写手机号',
          },
          {
            pattern: /^(?:(?:\+|00)86)?1\d{10}$/,
            message: '请输入正确的手机号码',
          },
        ]"
      />
      <van-field
        v-model="from.code"
        type="password"
        label="登录密码"
        placeholder="请输入密码"
        required
        :rules="[{ required: true, message: '请填写密码' }, {}]"
      />
      <div style="margin: 16px">
        <van-button round block type="info" native-type="submit"
          >提交</van-button
        >
      </div>
    </van-form>
  </div>
</template>

<script>
import { loginAPI } from '@/api/userAPI'
import { mapMutations } from 'vuex'
export default {
  // 组件的name属性的值，首字母要大写
  name: 'Login',
  data () {
    return {
      // 用户填写的表单数据
      from: {
        // 手机号
        mobile: '',
        // 密码
        code: ''

      }
    }
  },
  methods: {
    ...mapMutations(['updataTokenInfo']),

    async onSubmit () {
      console.log(this.from)
      // 获取用户填写的登录信息对象
      const { data: res } = await loginAPI(this.from)

      // 判断是否登录成功
      if (res.message === 'OK') {
        // 把token存储到本地存储
        // localStorage.setItem('token', JSON.stringify(res.data))
        // 把token存储到vuex中
        this.updataTokenInfo(res.data)
        // 跳转到首页
        const navPath = this.$route.query.pre || '/'
        this.$router.replace(navPath)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.login-container {
  padding-top: 46px;
}
</style>
